<template>
	<!-- 公众号数字人 -->
	<view class='szr-inner'>
		<image src="/static/back.png" class="guanbi" @click="back" mode=""></image>
		<view :class="SZR_class" style="z-index: 1">
		</view>
	</view>
</template>

<script>
	import {
		useConversationStore
	} from "../store";
	const conversationStore = useConversationStore()
	import {
		DevBaseUrl,
		ProBaseUrl,
		member_id
	} from "../common/config";
	export default {
		name: "szrnew",
		props: {
			SZR_class: {
				type: String
			},
			Device: {
				type: String
			}
		},
		data() {
			return {
				szr: null,
				szr_class: '',
				currentid: 0,
				sendMessageType: '',
				componentsType: '',
				isFirst: true
			};
		},
		created() {
			this.szr_class = '.' + this.SZR_class
			console.log(this.Device)
			if (this.Device !== 'pc') {
				// document.body.classList.add('no-radius');
				// window.addEventListener('click', () => this.windowClickhandler())
			} else {
				// document.body.classList.remove('no-radius');
			}
			console.log('createdDevice', this.Device);
		},

		mounted() {
			console.log('mountedDevice', this.Device)
			console.log('window.location.search', window.location.search)
			console.log('window.location', window.location)
			// #ifdef MP-WEIXIN
			console.log('cccccccccccccc-----')
			// #endif
			this.$eventBus.$on('stopVoice', () => {
				this.szr.postMessage({
					type: 'H5_SZR_STOP_VOICE',
					detail: {
						code: 3
					}
				})
			})
			this.initSZR()
			// this.szr.postMessage({
			// 	type: 'H5_SZR_STOP_VOICE'
			// })
			setTimeout(() => {
				// this.handleShuzirenPageStyle()
			}, 500)
			this.$eventBus.$on('sendMessage', (data) => {
				console.log('sendmessage', data)
				try {
					this.currentid = data.id

					console.log(data.type, data.detail.value)
					if (data.sendMessageType) {
						this.sendMessageType = data.sendMessageType
					}
					if (data.componentsType) {
						this.componentsType = data.componentsType
					}
					if (!this.isFirst) {
						this.szr.postMessage({
							type: 'H5_SZR_STOP_VOICE',
							detail: {
								code: 3
							}
						})


					}


					this.isFirst = false
					this.szr.postMessage({
						type: data.type,
						detail: {
							code: 3,
							value: data.detail.value,
							is_ppt: 99
						},

					})
					this.szr.onMessage()
				} catch (error) {}
			})
			// this.$eventBus.$on('stop', () => {
			// 	console.log('暂停说话-------------------------------------------------------------------')
			// 	this.szr.postMessage({
			// 		type: 'H5_SZR_STOP_VOICE'
			// 	})
			// })
		},
		beforeDestroy() {
			this.$eventBus.$off('sendMessage')
			
			// window.removeEventListener('click', this.windowClickhandler())
		},
		methods: {
			back(){
				console.log(111)
				window.history.back();
				// uni.navigateBack()
			},
			windowClickhandler() {
				console.log(11111)
				this.bindImageClickEvents()
			},
			bindImageClickEvents() {
				this.$nextTick(() => {
					const container = this.$el; // 当前组件的根元素
					console.log(container)
					const images = container.querySelectorAll(".bubble .markdown img");
					console.log(images);
					images.forEach(img => {
						// 避免重复绑定
						if (!img._listenerAdded) {
							img._listenerAdded = true;
							img.addEventListener("click", e => {
								const src = e.target.src;
								console.log("图片被点击:", src);
								this.handleImageClick(src);
							});
						}
					});
				});
			},
			handleImageClick(src) {
				// 自定义处理函数
				uni.previewImage({
					current: src,
					urls: [src],
				});
			},
			handleShuzirenPageStyle() {
				const target = document.querySelector('.miniSZR .shuziren-page')
				console.log(target)
				if (target) {
					if (this.Device !== 'pc') {
						target.style.borderRadius = '0'
					} else {
						target.style.borderRadius = '0px'
					}
				}
			},
			initSZR() {
				this.szr = SZR.create({
					width: "100%",
					height: "100%",
					containner: this.szr_class,
					// shuziren_id: 153,
					pcMemberId: 8721,
					pcUserId: "74529",
					pcMobile: "17838184433",
					pcCode: new Date().getTime(),
					deviceId: new Date().getTime(),
					baseUrl: 'https://yufabu.saizhuge.net',
					socketUrl: 'wss://eval.saizhuge.net',
					showBackground: true,
					showRecorderBtn: false, //显示录音按钮
					isVideoEnhance: true,
					defaultShuziren: {
						shuziren_id: 168
					},
					onMessage: (e) => {
						console.log('eeeeee', e)
						this.accept(e)
					},
					addMessage: (e) => {
						console.log('66666', e)
					},
					speechCallback: (e) => {
						console.log(e)
					}
				})
			},
			accept(e) {
				// 当播放完成后要做的操作
				if (e.detail && e.detail.action && e.detail.action == 'play-end') {
					console.log('eeeee', e)
					this.RecordQuestionTimes(e.detail.message, e.detail.returnMessage)
				}
				if (e && e.type && e.type == 'SZR_H5_MESSAGE') {
					console.log('e：', e)
					if (e.detail && e.detail.originData && e.detail.originData.message_suggested) {
						const List = e.detail.originData.message_suggested
						if (List && Array.isArray(List) && List.length) {
							conversationStore.addMessage_suggestList(List)
						}
					}
					if (!e.detail.isself) {
						conversationStore.addAiResponse(e.detail.message, this.currentid, this.sendMessageType);

						this.$eventBus.$emit('ChangeTipsText')
					}
					if (this.componentsType && e.detail.isself) {
						conversationStore.sendMessage(e.detail.message, this.currentid, 'voice')
					}
					console.log(conversationStore.voiceMessages)

				}

			},

			RecordQuestionTimes(q, a) {
				if (!q || !a) return
				console.log('Device------', this.Device)
				let client_type = 0
				switch (this.Device) {
					case 'pc':
						client_type = 1
						break
					case 'AdvertisingMachine':
						client_type = 4
						break
				}
				const urlClient = new URLSearchParams(window.location.search).get('clientType')
				if (this.Device == 'wx') {
					client_type = +urlClient
				}
				console.log('clientType', client_type)
				try {
					const obj = {
						input: q,
						output: a,
						client_type
					}
					console.log(obj)
					fetch(`${ProBaseUrl}/api/m${member_id}/682c52b64bf21`, {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify(obj)
						}).then(res => res.json())
						.then(res1 => {
							console.log(res1)
						})
				} catch (error) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
	.guanbi{
		position: absolute;
		background-color: transparent;
		top: 64rpx;
		left: 32rpx;
		z-index: 6;
		color: #ffffff;
		font-size: 48rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.szr-inner {
		scale: 100%;
		position: absolute;
		/* bottom: -6%; */
	}

	:deep(#u-a-p div) {
		z-index: 99999999999999999999999 !important;
	}

	#u-a-p div {
		z-index: 99999999999999999999999 !important;
	}

	:deep(.miniSZR) {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 100% !important;
		align-items: center;
	}

	:deep(.miniSZR .digital-human-video .digital-human-video-bg) {
		background-color:#ffffff;
		background-size: cover !important;
		/* background-image:none !important; */
	}

	:deep(.miniSZR .digital-human-video #DIGITAL_HUMAN_VIDEO) {
		object-fit: cover;
	}

	:deep(.miniSZR .shuziren-page) {
		min-width: auto !important;
		min-height: auto !important;
		/* border-radius: 26px !important; */
	}

	body.no-radius :deep(.miniSZR .shuziren-page) {
		border-radius: 0 !important;
	}

	:deep(.miniSZR .shuziren-chat) {
		border: none !important;
		bottom: 18vh !important;
		height: 30vh !important;
		background: none !important;
	}

	:deep(.miniSZR .shuziren-chat .chatbgvO) {

		background-color: rgba(0, 0, 0, 0.3);
		padding: 12px;
		font-size: 14px !important;
		color: #FFF !important;
	}

	:deep(.miniSZR .shuziren-chat .close-btn) {
		display: none !important;
	}

	:deep(.miniSZR .shuziren-chat .chatself .chatbgvS) {
		color: #212121;
		padding: 12px;
		background: #EBF4FC !important;
	}

	:deep(.miniSZR .shuziren-chat .dir) {
		display: none !important;

	}

	:deep(.miniSZR .shuziren-chat .head-img) {
		display: none !important;
	}

	:deep(.miniSZR .digital-human-video .voice-buttons) {
		z-index: 9999999999999999999 !important;
		top: 18% !important;
	}

	:deep(.miniSZR .digital-human-video .yuyin-input) {
		z-index: 9999999999999999999 !important;
	}



















	:deep(.advermachineSZR .shuziren-chat) {
		border: none !important;
		bottom: 15% !important;
		height: 30vh !important;
		background: none !important;
	}

	:deep(.advermachineSZR .shuziren-chat .chatbgvO) {

		background-color: rgba(0, 0, 0, 0.3);
		padding: 12px;
		font-size: 14px !important;
		color: #FFF !important;
	}

	:deep(.advermachineSZR .shuziren-chat .close-btn) {
		display: none !important;
	}

	:deep(.advermachineSZR .shuziren-chat .chatself .chatbgvS) {
		color: #212121;
		padding: 12px;
		background: #EBF4FC !important;
	}

	:deep(.advermachineSZR .shuziren-chat .dir) {
		display: none !important;

	}

	:deep(.advermachineSZR .shuziren-chat .head-img) {
		display: none !important;
	}

	/* :deep(.shuziren-chat) {
		display: none !important;
	} */
</style>